<template>
  <div>
    <div id="myDiagramDiv"
      style="width:100%; height:900px; background-color: #E6EEEE;margin-bottom: 10px;outline:none;border: none;">
    </div>
    <!-- 将获取的画布内容的json串放入mySavedModel文本域内 -->
    <textarea id="mySavedModel" style="width:100%;height:0px ;border:0" />
  </div>
</template>
<script>
export default {
  name: "gojstwo",
  data() {
    return {
      myDiagram: null,//创建画布
      nodeData: [],//数据
      linkData: [],//链接点
    }
  },
  mounted() {
    this.initDiagram();
  },
  methods: {
    initDiagram() {
      var $ = go.GraphObject.make;
      this.myDiagram =
        $(go.Diagram, "myDiagramDiv", {
          validCycle: go.Diagram.CycleNotDirected, // don't allow loops
          "undoManager.isEnabled": true,
          allowLink: false,//是否可以创建新的链接线
          allowDelete: false,//是否可以删除链接线
          //去除点击时的蓝色边框
          nodeSelectionAdornmentTemplate:
            $(go.Adornment, "Auto",
              $(go.Shape, "Rectangle", { fill: "white", stroke: "#898B8C" }),
            ),
        });
      var fieldTemplate =
        $(go.Panel, "TableRow", // gojs的panel对象，行的设置
          new go.Binding("portId", "name"), // new go.Binding用于实现数据的绑定
          {
            background: "transparent", // so this port's background can be picked by the mouse
            fromSpot: go.Spot.Right, // links only go from the right side to the left side
            toSpot: go.Spot.Left,
            fromLinkable: true,
            toLinkable: true
          },
          //子级样式
          $(go.TextBlock, {
            margin: new go.Margin(15, 15),
            height: 20,
            width: "auto",
            column: 2,
            font: "bold 13px sans-serif",
            background: "#FFFF02",
            alignment: go.Spot.Left,
            fromLinkable: false,
            toLinkable: false
          },
            new go.Binding("text", "name")),
        );
      this.myDiagram.nodeTemplate =
        $(go.Node, "Auto", {
          copyable: false,
          deletable: false,
        },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          //表格形状  RoundedRectangle圆角矩形
          $(go.Shape, "RoundedRectangle", {
            fill: "#fff",
            stroke: null, //边框颜色
            strokeWidth: 2
          }),
          $(go.Panel, "Vertical", {
            stretch: go.GraphObject.Horizontal,
          },
            $(go.Panel, "Auto",
              $(go.Shape, {
                strokeWidth: 0,
                stroke: '#ccc',
                scale: 0.5,
              }, new go.Binding("fill", "backgroundcolor")),//绑定背景颜色字段
              $(go.Panel, "Horizontal", {
                stretch: go.GraphObject.Horizontal
              }, // as wide as the whole node
                $(go.Picture, {
                  // width: 10,
                  // height: 30
                }, new go.Binding("source", "img")),//绑定图片
                //绑定图片
                $(go.TextBlock, { //标题属性
                  alignment: go.Spot.Center,
                  margin: (10, 15),
                  stroke: "#898B8C",
                  textAlign: "center",
                  font: "bold 12pt sans-serif"
                },
                  new go.Binding("text", "key"), new go.Binding("stroke", "fontcolor"))//绑定文本
              )),
            {
              click: this.nodeContextmenu,
            },
            $(go.Panel, "Table", {
              name: "TABLE",
              stretch: go.GraphObject.Horizontal,
              defaultAlignment: go.Spot.Left,
              defaultStretch: go.GraphObject.Horizontal,
              defaultColumnSeparatorStroke: "#cc3300",
              defaultRowSeparatorStroke: "#33ff00", //每一项数据的分割线
              itemTemplate: fieldTemplate
            },
              new go.Binding("itemArray", "fields")//表格内绑定行
            )
          )
        );


      this.myDiagram.linkTemplate =
        $(go.Link,
          { curve: go.Link.Bezier },  // Bezier curve  曲线
          // { mouseEnter: this.linkMouseEnter },//线的鼠标移入事件
          {
            routing: go.Link.Normal,// go.Link.Normal 直线 go.Link.Orthogonal 折线
            corner: 10,//折线圆角
            // allowLink: false,
            relinkableFrom: false,//可设置连接起点
            relinkableTo: false,//可设置连接终点
            toShortLength: 4,//箭头大小
          },
          {
            doubleClick: this.linkClicked //线条双击事件
          },
          // 连线
          $(go.Shape, {
            margin: 100, name: "changecolor",
            strokeWidth: 1.5,//箭线粗细
            toArrow: "OpenTriangle", stroke: "#898B8C",
          }),
          $(go.Shape, {
            toArrow: "Standard",//箭头形状
            fill: "#898B8C"//箭头填充颜色
          })
        );
      //请求数据
      let { default: { data } } = require('./datalist');
      //渲染的数据
      this.nodeData = data.etadatalist.map(item => {
        item.key = item.instanceCode,//渲染的名字
          item.backgroundcolor = "#EFF4F8",//第一条数据的标题背景和文字颜色
          item.fontcolor = '#898B8C'//第一条数据的标题背景和文字颜色
        item.fields = []
        let obj = {}
        obj.name = item.instanceCode
        item.fields.push(obj)
        return item
      })
      console.log(this.nodeData);
      // 链接关系
      this.linkData = data.relationList
      console.log(data.relationList, ' data.relationList');

      this.myDiagram.model =
        $(go.GraphLinksModel, {
          copiesArrays: true,
          copiesArrayObjects: true,
          linkFromPortIdProperty: "fromPort",
          linkToPortIdProperty: "toPort",
          "Changed": function (e) {
            // if (e.isTransactionFinished) showModel();
          },
          nodeDataArray: this.nodeData,
          linkDataArray: this.linkData
        });
      // showModel(); // show the diagram's initial model
      // function showModel() {
      //   console.log(this.myDiagram, 'this.myDiagram');
      //   let model = this.myDiagram.model
      //   document.getElementById("mySavedModel").textContent = model.toJson();//获取所有节点及连线数据
      // }
    },
    //线条点击
    linkClicked(e, obj) {
      console.log('0000');
      console.log(e, 'e');
      console.log(obj, 'obj');// ef  ==>  vf  两个链接的数据
      this.afresh();
    },
    /** 节点点击 */
    nodeClicked(e, obj) {
      console.log('111')
      // var key='1';//节点key
      // var nodeData = diagram.model.findNodeDataForKey(key);
      // nodeData.text = '666';//text 是节点data中的一个属性
      // diagram.model.updateTargetBindings(nodeData);

    },
    /** 节点点击 */
    nodeContextmenu(e, obj) {
      console.log('222')
      // var key='1';//节点key
      // var nodeData = diagram.model.findNodeDataForKey(key);
      // nodeData.text = '666';//text 是节点data中的一个属性
      // diagram.model.updateTargetBindings(nodeData);
    },
    //鼠标移入线条事件
    // linkMouseEnter(e, link) {
    //   console.log(e);
    //   console.log(link);
    //   console.log(link.findObject('changecolor'), '鼠标移入了到连线了')
    //   link.findObject('changecolor').stroke = 'green'
    // }
    afresh() {
      // 清空当前画布
      this.myDiagram.div = null;
      // 数据清空一次
      this.nodeData = [];
      this.linkData = [];
      // 调用函数,再渲染一次
      this.initDiagram();
    },
  }
};
</script>

<style lang="less" scoped>
body #myDiagramDiv {
  width: 100%;
  height: 500px;

  #myDiagramDiv canvas {
    outline: none;
    border: none;
    background: color(#E6EEEE);
  }
}
</style>
